// 四个 tabbar 页面都需要设置购物车的数字徽标，所以封装成一个 mixin
import {
  mapGetters
} from 'vuex'

export default {
  watch: {
    // 监听 total 值的变化，动态设置 tabbar 的徽标值
    total() {
      this.setBadge()
    }
  },
  
  computed: {
    ...mapGetters('m_cart', ['total'])
  },

  methods: {
    setBadge() {
      // 购物车数量为零时，隐藏小红点
      if (this.total === 0) return uni.hideTabBarRedDot({
        index: 2
      })
      
      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      uni.setTabBarBadge({
        index: 2, // 索引
        text: this.total + '', // 注意：text 的值必须是字符串，不能是数字
      })
    }
  },

  onShow() {
    // 页面刚展示时，设置数字徽标
    this.setBadge()
  },
}
